<template>
  <ul>
    <li v-for="(_, i) in list" :key="i">
      <span>{{ _.name }}</span>
      <br />
      <input type="text" class="input" />
    </li>
  </ul>
  <el-button type="primary" @click="reverse()">reverse</el-button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const list = ref([
  { id: "1", name: "JS" },
  { id: "2", name: "CSS" },
  { id: "1", name: "Html" },
]);
const reverse = () => {
  list.value.reverse();
};
</script>
<style lang="scss" scoped>
.input {
  border: 1px solid #ccc;
}
</style>
